
<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <div></div>
</template>

<script setup>
// cSpell:ignore pixi
import { 
  Application, 
  Assets, 
  Texture,
  Rectangle, Sprite,
  Graphics
} from 'pixi.js';

(async () =>
{
    // Create a new application
    const app = new Application();

    // Initialize the application
    await app.init({ background: '#ffffff', resizeTo: window });

    // Append the application canvas to the document body
    document.body.appendChild(app.canvas);

    try {
        // 1. 确保雪碧图完全加载
        const spriteSheet = await Assets.load({
            src: 'download.png',
            data: {
                loaded: () => console.log('图片已完全加载')
            }
        });
        
        // 2. 强制等待基础纹理准备就绪
        await new Promise(resolve => {
            if (spriteSheet.source.valid) {
                resolve();
            } else {
                spriteSheet.source.on('update', resolve);
            }
        });

        console.log('验证纹理:', {
            width: spriteSheet.source.width,
            height: spriteSheet.source.height,
            valid: spriteSheet.source.valid
        });

        // 3. 创建子纹理（严格模式）
        const rect = new Rectangle(40, 0, 44, 50);
        console.log('裁剪区域:', rect);
        
        if (rect.right > spriteSheet.source.width || 
            rect.bottom > spriteSheet.source.height) {
            throw new Error('裁剪区域超出纹理边界');
        }

        const subTexture = new Texture(spriteSheet.source);
        subTexture.frame = rect;
        subTexture.orig = rect;  // 关键！
        // subTexture.updateUvs();  // 关键！
        
        // 4. 验证子纹理
        console.log('子纹理状态:', {
            frame: subTexture.frame,
            valid: subTexture.valid,
            noFrame: subTexture.noFrame
        });

        // 5. 创建精灵
        const sprite = new Sprite(subTexture);
        sprite.position.set(100, 100);
        app.stage.addChild(sprite);

        // 6. 调试辅助：显示原始纹理对比
        const debug = new Sprite(spriteSheet);
        debug.scale.set(0.5);
        debug.position.set(300, 100);
        
        // 在原始纹理上标记裁剪区域
        const border = new Graphics()
            .lineStyle(2, 0xFF0000)
            .drawRect(40, 0, 44, 50);
        debug.addChild(border);
        
        app.stage.addChild(debug);

    } catch (error) {
        console.error('错误详情:', error);
    }           
})();

</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
canvas{
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
</style>
